<!-- 首页 -->
<template>
  <div class="home">
    <!-- 左侧 -->
    <div class="left">
      <div class="left_top">
        <div :class="`left_top_left ${com_check == '0' ? '' : 'left_top_left_check'}`">
          <div class="title">
            <div class="title_left">低压泵</div>
            <div class="title_right">
              <span>
                <select v-model="selectData" class="select_pow">
                  <option value="1">低压泵A</option>
                  <option value="2">低压泵B</option>
                  <option value="3">低压泵C</option>
                  <option value="4">低压泵D</option>
                  <option value="5">低压泵E</option>
                </select>
              </span>
              &nbsp;
              <span @click="run" class="run">运行</span>
            </div>
          </div>

          <div class="left_top_left_com">
            <div @click="changeComputedCheck(0)"
              :class="`left_top_left_com_left ${com_check == '0' ? 'left_top_left_com_left_active' : ''}`">
              计 算
            </div>
            <div @click="changeComputedCheck(1)"
              :class="`left_top_left_com_left ${com_check == '1' ? 'left_top_left_com_left_active' : ''}`">
              校 核
            </div>
          </div>

          <div class="left_top_left_form">
            <!-- 计算显示 -->
            <div v-if="com_check == '0'">
              <!-- 输入参数 -->
              <div>
                <div class="inputParams">
                  输入参数
                </div>
                <div class="inputParams_form">
                  <div class="inputParams_form_item">
                    LNG密度 &nbsp;
                    <input type="text" v-model="inputParams.density" class="inputText" style="width: 4vw;">&nbsp;<span>kg/m³</span> 
                  </div>
                  <div class="inputParams_form_item">
                    储罐压力 &nbsp;
                    <input type="text" v-model="inputParams.pressure" class="inputText" style="width: 4vw;">&nbsp;<span>Mpag</span> 
                  </div>
                  <div class="inputParams_form_item">
                    储罐温度 &nbsp;
                    <input type="text" v-model="inputParams.temperature" class="inputText" style="width: 4vw;">&nbsp;<span>℃</span>
                    
                  </div>
                  <div class="inputParams_form_item">
                    LNG流量 &nbsp;
                    <input type="text" v-model="inputParams.flow" class="inputText" style="width: 4vw;">&nbsp;<span>m³/h</span>
                  </div>
                </div>
              </div>
              <!-- 参数 -->
              <div>
                <div class="params">
                  参数
                </div>
                <div class="params_form">
                  <div class="params_form_item">
                    结构参数 &nbsp;
                    <input type="text" v-model="params.name1" class="inputText" disabled style="width: 5vw;">
                  </div>
                  <div class="params_form_item">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 组分 &nbsp;
                    <input type="text" v-model="params.name2" class="inputText" style="width: 5vw;">
                  </div>
                </div>
              </div>
            </div>
            <!-- 校核显示 -->
            <div v-else>
              <div class="checkParams">
                <div class="checkParams_item">
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;结构参数&nbsp;&nbsp;<select v-model="check_form.name1"
                    class="checkParams_select">
                    <option value="1">低压泵A</option>
                  </select>
                </div>
                <div class="checkParams_item">
                  计算输入参数&nbsp;&nbsp;<input type="text" v-model="check_form.name2" class="inputText checkParams_input">
                  <div class="import" @click="showDialog">导 入</div>
                  <el-dialog v-model="dialogVisible" draggable>
                    <FileUpload :isShowTip="false" :value="fileList" />
                  </el-dialog>
                </div>
                <div class="checkParams_item">
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;组分&nbsp;&nbsp;<select
                    v-model="check_form.name3" class="checkParams_select">
                    <option value="1">低压泵A</option>
                  </select>
                </div>
              </div>
            </div>
            <!-- 组成 -->
            <div>
              <div class="compose">
                组成
              </div>
              <div class="compose_form">
                <div class="compose_form_item">
                  &nbsp;&nbsp;&nbsp;&nbsp;甲烷&nbsp;&nbsp;
                  <input type="text" v-model="compose.name1" class="inputText" style="width: 5vw;">
                </div>
            
            
                <div class="compose_form_item">
                  异丁烷&nbsp;&nbsp;
                  <input type="text" v-model="compose.name4" class="inputText" style="width: 5vw;">
                </div>
                <div class="compose_form_item">
                  &nbsp;&nbsp;&nbsp;&nbsp;乙烷&nbsp;&nbsp;
                  <input type="text" v-model="compose.name2" class="inputText" style="width: 5vw;">
                </div>
                <div class="compose_form_item">
                  正丁烷&nbsp;&nbsp;
                  <input type="text" v-model="compose.name5" class="inputText" style="width: 5vw;">
                </div>
                 
                <div class="compose_form_item">
                  &nbsp;&nbsp;&nbsp;&nbsp;丙烷&nbsp;&nbsp;
                  <input type="text" v-model="compose.name3" class="inputText" style="width: 5vw;">
                </div>
                <div class="compose_form_item">
                  异戊烷&nbsp;&nbsp;
                  <input type="text" v-model="compose.name6" class="inputText" style="width: 5vw;">
                </div>
                <div class="compose_form_item">
                  &nbsp;&nbsp;&nbsp;&nbsp;氮气&nbsp;&nbsp;
                  <input type="text" v-model="compose.name8" class="inputText" style="width: 5vw;">
                </div>
                <div class="compose_form_item">
                  正戊烷&nbsp;&nbsp;
                  <input type="text" v-model="compose.name7" class="inputText" style="width: 5vw;">
                </div>
               
                <div class="compose_form_item">
                  <!-- 占位 -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="left_top_right">
          <div class="mode">
            <!-- 计算输入 -->
            <div v-if="mode_show == '0'" class="mode_com">
              <div class="mode_com_left">
                <div class="mode_com_left_title">输入参数</div>
                <div class="mode_com_left_form">
                  <div class="mode_com_left_form_item">
                    LNG密度 &nbsp;
                    <input type="text" v-model="inputParams.density" class="inputText" style="width: 5vw;">
                    &nbsp; kg/m³
                  </div>
                  <div class="mode_com_left_form_item">
                    储罐压力 &nbsp;
                    <input type="text" v-model="inputParams.pressure" class="inputText" style="width: 5vw;">
                    &nbsp; Mpag
                  </div>
                  <div class="mode_com_left_form_item">
                    储罐温度 &nbsp;
                    <input type="text" v-model="inputParams.temperature" class="inputText" style="width: 5vw;"> &nbsp; 
                    ℃
                  </div>

                </div>
              </div>
              <div class="mode_com_right">
                <div class="mode_com_right_title">输入参数</div>
                <div class="mode_com_left_form_item">
                  LNG流量 &nbsp;
                  <input type="text" v-model="inputParams.flow" class="inputText" style="width: 4vw;"> &nbsp; m³/h
                </div>
              </div>
            </div>
            <!-- 校核 -->
            <div v-if="mode_show == '1'" class="mode_check">
              <div class="mode_check_left">
                <div class="mode_check_left_title">输入参数</div>
                <div class="mode_check_left_text">电机电流 A</div>
              </div>
              <div class="mode_check_right mode_check_right_top">
                <div class="mode_check_right_title">
                  输入参数
                </div>
                <div class="mode_check_right_text">
                  <div>LNG流量 m³/h</div>
                  <div>出口LNG温度 ℃</div>
                  <div>出口LNG压力 MPag</div>
                </div>
              </div>
              <div class="mode_check_right mode_check_right_bottom">
                <div class="mode_check_right_title">输入参数</div>
                <div class="mode_check_right_text">
                  <div>储罐密度 kg/m³</div>
                  <div>储罐压力 MPag</div>
                  <div>储罐温度 ℃</div>
                </div>
              </div>
            </div>
            <!-- 输出 -->
            <div v-if="mode_show == '2'" class="mode_output">

              <div class="mode_output_left">
                <div>输出参数</div>
                <div>电机功率: <span>210.3KW</span> </div>
                <div>计算功率: <span>84.6%</span></div>
                <div>设计效率: <span>77.2%</span></div>
              </div>
              <div class="mode_output_right_top">
                <div>输出参数</div>
                <div>出口LNG温度: <span>210.3℃</span></div>
                <div>出口LNG压力: <span>113.5MPag</span></div>
              </div>
              <div class="mode_output_right_bottom">
                <div>输出参数</div>
                <div>计算扬程: <span>74.6m</span></div>
                <div>设计扬程: <span>126.9m</span></div>
                <div>计算泵功率: <span>126.9m</span></div>
                <div>设计泵功率: <span>126.9m</span></div>
                <div>计算必须气浊余量: <span>126.9m</span></div>
                <div>设计必须气浊余量: <span>126.9m</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 左侧底部切换 -->
      <div class="left_bottom" @click="">
        <div @click="pre_menu">
          <img src="../../../assets/images/left_bottom/left_bottom_0.png" alt="">
        </div>
        <div v-for="(item, index) in menu_icon" :key="index" @click="changeMenu(index)">
          <img :src="getIcon(index == menu_active ? item.menu_icon_active : item.menu_icon)" class="menu_icon"
            draggable="false">
          <div :class="`menu_text ${index == menu_active && 'menu_text_active'}`">
            {{ item.menu_text }}
          </div>
        </div>
        <div @click="next_menu">
          <img src="../../../assets/images/left_bottom/left_bottom_7.png" alt="">
        </div>
      </div>
    </div>

    <!-- 右侧 -->
    <div class="right">
      <div class="right_top">
        <div v-for="({ key, value }) in com_check == '0' ? computedData : checkModeData" :key="key"
          class="right_top_item">
          <div class="right_top_item_key">{{ key }}</div>
          <div class="right_top_item_value">{{ value }}</div>
        </div>
      </div>
      <div class="right_center">
        <!-- 出口LNG物性 -->
        <div v-if="com_check == '0'">
          <div class="right_bg PhysicalProperties">
            <div class="PhysicalProperties_title">物 性</div>
            <div class="PhysicalProperties_form">

              <div class="PhysicalProperties_form_item" style="width: 28%;">
                密度ρ&nbsp;<input type="text" v-model="PhysicalProperties.name1" class="inputText"
                  style="width: 2.5vw;">&nbsp;<span>kg/m³</span>
              </div>
              <div class="PhysicalProperties_form_item">
                &nbsp;压缩因子Z&nbsp;<input type="text" v-model="PhysicalProperties.name2" class="inputText"
                  style="width: 2.5vw;">
                &nbsp;<span></span>
              </div>
              <div class="PhysicalProperties_form_item">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;焓h&nbsp;<input type="text"
                  v-model="PhysicalProperties.name3" class="inputText" style="width: 2.5vw;">
                &nbsp;<span>kJ/kg</span>
              </div>
              <div class="PhysicalProperties_form_item" style="width: 28%;">
                &nbsp;&nbsp;&nbsp;&nbsp;熵s&nbsp;<input type="text" v-model="PhysicalProperties.name4" class="inputText"
                  style="width: 2.5vw;"><span>&nbsp;kJ/(kg·K)</span>
              </div>
              <div class="PhysicalProperties_form_item">
                定容热容cv&nbsp;<input type="text" v-model="PhysicalProperties.name5" class="inputText"
                  style="width: 2.5vw;">&nbsp;<span>kJ/(kg·K)</span>
              </div>
              <div class="PhysicalProperties_form_item">
                定压热容cp&nbsp;<input type="text" v-model="PhysicalProperties.name6" class="inputText"
                  style="width: 2.5vw;">&nbsp;<span>kJ/(kg·K)</span>
              </div>
              <div class="PhysicalProperties_form_item" style="width: 28%;">
                音速u&nbsp;<input type="text" v-model="PhysicalProperties.name7" class="inputText" style="width: 2.5vw;">
                &nbsp;<span>m/s</span>
              </div>
              <div class="PhysicalProperties_form_item">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;热导率λ&nbsp;<input type="text" v-model="PhysicalProperties.name8"
                  class="inputText" style="width: 2.5vw;">
                &nbsp;<span>W/(m·K)</span>
              </div>
              <div class="PhysicalProperties_form_item">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;黏度η&nbsp;<input type="text"
                  v-model="PhysicalProperties.name9" class="inputText" style="width: 2.5vw;">&nbsp;<span>μPa∙s</span>
              </div>

            </div>
          </div>
        </div>
        <!-- 拟合参数 -->
        <div v-else class="right_bg FittingParameters">
          <div class="FittingParameters_title">
            拟 合 参 数
          </div>
          <div class="FittingParameters_form">
            <div class="FittingParameters_form_item">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;滑移系数&nbsp;&nbsp;<input type="text"
                v-model="FittingParameters.name1" class="inputText" style="width: 5vw;">&nbsp;
            </div>
            <div class="FittingParameters_form_item">
              冲击损失系数&nbsp;&nbsp;<input type="text" v-model="FittingParameters.name2" class="inputText"
                style="width: 5vw;">&nbsp;
            </div>
            <div class="FittingParameters_form_item">
              摩擦损失系数&nbsp;&nbsp;<input type="text" v-model="FittingParameters.name3" class="inputText"
                style="width: 5vw;">&nbsp;
            </div>
            <div class="FittingParameters_form_item">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;阻力系数1&nbsp;&nbsp;<input type="text" v-model="FittingParameters.name4"
                class="inputText" style="width: 5vw;">&nbsp;
            </div>
            <div class="FittingParameters_form_item">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;阻力系数2&nbsp;&nbsp;<input type="text" v-model="FittingParameters.name5"
                class="inputText" style="width: 5vw;">&nbsp;
            </div>
            <div class="FittingParameters_form_item">
              <div class="FittingParameters_form_item_btn" @click="FittingParameters_update"> 修 改 </div>
            </div>
          </div>
        </div>

      </div>
      <div class="right_bottom right_bg">
        <div class="echarts_left">
          <div class="echarts_left_top">
            <div v-for="(item,i) in echarts_left" :key="i" :class="`echarts_left_top_div ${echarts_left_active == i ? 'echarts_left_top_bg_active' : ''}`" @click="echartsChange(i)">
              {{ item }}
            </div>
          </div>
          <div class="echarts_left_bottom">流量</div>
        </div>
        <LineEcharts :="props" class="echarts_right" @xparams="xparams"/>
      </div>
    </div>
  </div>
</template>
<script setup>
// 动态获取静态图片资源
function getIcon(item) {
  return new URL(`../../../assets/images/left_bottom/${item}.png`, import.meta.url).href
}

let flag = false
//#region 计算与校核切换
const com_check = ref(0) //0 是计算 1是校核
const mode_show = ref(0) // 0 计算 1校核 2 输出
function changeComputedCheck(num) {
  com_check.value = num
  mode_show.value = num
}
//#endregion

//#region 左侧输入数据
// 顶部选择器 低压泵1
const selectData = ref('1')
// 输入参数
const inputParams = ref({})
// 参数
const params = ref({})
// 组成
const compose = ref({})
// 校核
const check_form = ref({})

function run() {
  console.log('输入参数', inputParams.value);
  console.log('参数', params.value);
  console.log('组成', compose.value);
  console.log('校核', check_form.value);
  mode_show.value = 2 // 显示输出结果
}
const fileList = ref({}) // 导入文件
const dialogVisible = ref(false) // 对话框
function showDialog() {
  console.log(111);
  dialogVisible.value = true
}
//#endregion

//#region 左侧底部切换按钮
const menu_icon = ref([
  {
    menu_text: '低压泵',
    menu_icon: 'left_bottom_1',
    menu_icon_active: 'left_bottom_1_active'
  },
  {
    menu_text: '再冷凝器',
    menu_icon: 'left_bottom_2',
    menu_icon_active: 'left_bottom_2_active'
  },
  {
    menu_text: 'BOG压缩机',
    menu_icon: 'left_bottom_3',
    menu_icon_active: 'left_bottom_3_active'
  },
  {
    menu_text: 'SCV气化器A',
    menu_icon: 'left_bottom_4',
    menu_icon_active: 'left_bottom_4_active'
  },
  {
    menu_text: 'IFV气化器A',
    menu_icon: 'left_bottom_5',
    menu_icon_active: 'left_bottom_5_active'
  },
  {
    menu_text: 'ORV气化器A',
    menu_icon: 'left_bottom_6',
    menu_icon_active: 'left_bottom_6_active'
  },
])
const menu_active = ref(0) // 激活菜单
function changeMenu(index) {
  // console.log(index);
  menu_active.value = index
}
// 上一个
function pre_menu() {
  menu_active.value > 0 ? menu_active.value-- : menu_active.value = menu_icon.value.length - 1
}
// 下一个
function next_menu() {
  menu_active.value < menu_icon.value.length - 1 ? menu_active.value++ : menu_active.value = 0
}
//#endregion

//#region 右侧输出数据
// 计算
const computedData = ref([
  {
    key: '计算扬程',
    value: '74.6m'
  },
  {
    key: '设计扬程',
    value: '126.9m'
  },
  {
    key: '出口压力',
    value: '111MPag',
  },
  {
    key: '出口温度',
    value: '210℃',
  },
  {
    key: '计算泵功率',
    value: '314.1kW'
  },
  {
    key: '设计泵功率',
    value: '211.9kW'
  },
  {
    key: '计算电机功率',
    value: '314.1kW'
  },
  {
    key: '设计电机功率',
    value: '211.9kW'
  },
  {
    key: '计算效率',
    value: '84.6%'
  },
  {
    key: '设计效率',
    value: '77.2%'
  },
  {
    key: '计算必须汽浊余量',
    value: '89.6m'
  },
  {
    key: '设计必须汽浊余量',
    value: '82.7m'
  },
])
// 校核
const checkModeData = ref([
  {
    key: '校核扬程',
    value: 'xxx'
  },
  {
    key: '设计扬程',
    value: 'xxxx'
  },
  {
    key: '校核泵功率',
    value: 'xxxx'
  },
  {
    key: '设计泵功率',
    value: 'xxx'
  },
  {
    key: '校核电机功率',
    value: 'xxxx'
  },
  {
    key: '设计电机功率',
    value: 'xxx'
  },
  {
    key: '校核效率',
    value: 'xxx'
  },
  {
    key: '设计效率',
    value: 'xxx'
  },
  {
    key: '校核必须汽浊余量',
    value: 'xxx'
  },
  {
    key: '设计必须汽浊余量',
    value: 'xxx'
  },
])
// 物性
const PhysicalProperties = ref({})
// 拟合参数
const FittingParameters = ref({})
function FittingParameters_update() {
  console.log('拟合参数', FittingParameters.value);
}
import { color } from 'echarts';
//#endregion

//#region 曲线图
import LineEcharts from '../components/LineEcharts.vue';
const xdata = ref(['200', '300', '400', '500', '600'])
const props = ref({
  // 顶部图列
  legend: {
    show: true,
    right: '5%',
    itemStyle: {
      borderWidth: 0,
    },
    icon: 'circle', // 图形样式
    lineStyle: {
      width: 0,
      inactiveWidth: 0,
    },
  },
  // 网格
  grid: {
    right: '10%',
  },
  // 数据显示
  tooltip: {
    // show:false,
    trigger: 'axis',
    axisPointer: {
      type:'line',
      axis:'x',
      lineStyle: {
        color: "#f59a23",
      },

    },
  },
  // 线条颜色
  color: ['#fab644', '#3fd9e4'],
  // x轴
  xAxis: {
    show: true,
    name: 'X',
    nameTextStyle: {
      color: '#60c6ff'
    },
    type: 'category',
    data: xdata.value,
    nameLocation: 'end',
    axisLabel: {
      color: '#4da5d8'
    },
    axisLine: {
      show: true,
      symbol: ['none', 'arrow'],
      symbolSize: [7, 10],
      symbolOffset: [0, 10],
      lineStyle: {
        color: '#60c6ff',
        width: 2,
      }
    },
  },
  // y轴
  yAxis: {
    show: true,
    name: 'Y',
    nameTextStyle: {
      color: '#60c6ff',
      padding: 18
    },
    axisLabel: {
      color: '#4da5d8'
    },
    axisLine: {
      show: true,
      symbol: ['none', 'arrow'],
      symbolSize: [7, 10],
      symbolOffset: 30,
      lineStyle: {
        color: '#60c6ff',
        width: 2,
        shadowOffsetY: -20,      //利用阴影进行反向延长
        shadowColor: '#60c6ff',   //设置阴影的颜色
      }
    },
    splitLine: {    //网格线
      show: true, //隐藏或显示
      lineStyle: {
        type: 'dashed',    //设置网格线类型 dotted：虚线   solid:实线
        color: '#005789'
      },
    }

  },
  // 数据
  series: [
    {
      name: '计算扬程m',
      data: [820, 1290, 330, 1320, 1000],
      type: 'line',
      smooth: true, //平滑
      showSymbol: false, //是否显示点
      symbolSize:15,// 显示点
      symbol:'image://data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzIzMTk0MjEwNzU0IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjM0Njc5IiBpZD0ibXhfbl8xNzIzMTk0MjEwNzU0IiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTUxMiAwYTUxMiA1MTIgMCAxIDAgMCAxMDI0QTUxMiA1MTIgMCAwIDAgNTEyIDB6IG0wIDkzMy4yNDhBNDIxLjI0OCA0MjEuMjQ4IDAgMSAxIDUxMiA5MC43NTJhNDIxLjI0OCA0MjEuMjQ4IDAgMCAxIDAgODQyLjQ5NnoiIGZpbGw9IiNmZmM4NGEiIHAtaWQ9IjM0NjgwIj48L3BhdGg+PHBhdGggZD0iTTUxMiA1MTJtLTIzMy4zNDQgMGEyMzMuMzQ0IDIzMy4zNDQgMCAxIDAgNDY2LjY4OCAwIDIzMy4zNDQgMjMzLjM0NCAwIDEgMC00NjYuNjg4IDBaIiBmaWxsPSIjZmZjODRhIiBwLWlkPSIzNDY4MSI+PC9wYXRoPjwvc3ZnPg==',
      lineStyle: {
        color: '#fab644', // 折线颜色
        width: 4,            // 折现宽度
        shadowBlur: 6,      // 阴影发散
        shadowColor: '#f59a23', // 阴影颜色
      },
      // markLine: {
      //   silent: true,
      //   symbol: ['none', 'none'],
      //   label: { show: false },
      //   data:[{
      //     xAxis:'400'
      //   }]
      // },
    },
    {
      name: '设计扬程m',
      data: [600, 800, 500, 1400, 1300],
      type: 'line',
      smooth: true, //平滑
      showSymbol: false, //是否显示点
      symbolSize:15,// 显示点
      symbol:'image://data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzIzMTk0MjEwNzU0IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjM0Njc5IiBpZD0ibXhfbl8xNzIzMTk0MjEwNzU0IiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTUxMiAwYTUxMiA1MTIgMCAxIDAgMCAxMDI0QTUxMiA1MTIgMCAwIDAgNTEyIDB6IG0wIDkzMy4yNDhBNDIxLjI0OCA0MjEuMjQ4IDAgMSAxIDUxMiA5MC43NTJhNDIxLjI0OCA0MjEuMjQ4IDAgMCAxIDAgODQyLjQ5NnoiIGZpbGw9IiM0NWVlZmEiIHAtaWQ9IjM0NjgwIj48L3BhdGg+PHBhdGggZD0iTTUxMiA1MTJtLTIzMy4zNDQgMGEyMzMuMzQ0IDIzMy4zNDQgMCAxIDAgNDY2LjY4OCAwIDIzMy4zNDQgMjMzLjM0NCAwIDEgMC00NjYuNjg4IDBaIiBmaWxsPSIjNDVlZWZhIiBwLWlkPSIzNDY4MSI+PC9wYXRoPjwvc3ZnPg==',
      lineStyle: {
        color: '#3fd9e4',
        width: 4,
        shadowBlur: 6,
        shadowColor: '#0cd9d8'
      }
    }
  ],
  dataIndex: 2,// 默认显示数据列
})
// 点击echarts 返回 x轴值 点击激活x轴
function xparams(e){
 props.value.dataIndex = xdata.value.findIndex(value => value == e)
 console.log(1);
}
//#endregion 

//#region echarts左侧切换

const echarts_left = ref(['扬程','泵功率','电机功率','效率','汽浊余量'])
const echartsData = ref([
  [
    {
      name:'计算扬程m',
      data:[110,500,600,200,400],
    },
    {
      name:'设计扬程m',
      data:[210,400,300,100,500],
    }
  ],
  [
    {
      name:'计算泵功率',
      data:[100,200,300,400,500],
    },
    {
      name:'设计泵功率',
      data:[500,400,300,200,100],
    }
  ],
  [
    {
      name:'计算电机功率',
      data:[500,200,100,200,500],
    },
    {
      name:'设计电机功率',
      data:[100,200,100,500,400],
    }
  ],
  [
    {
      name:'计算效率',
      data:[100,200,300,400,500],
    },
    {
      name:'设计效率',
      data:[500,200,100,500,100],
    }
  ],
  [
    {
      name:'计算必须气浊余量',
      data:[400,200,300,400,500],
    },
    {
      name:'设计必须气浊余量',
      data:[400,300,500,100,400],
    }
  ],
])
const echarts_left_active = ref(0)
function echartsChange(i){
  echarts_left_active.value = i
  props.value.series.forEach((item,index)=>{
    item.name = echartsData.value[i][index].name
    item.data = echartsData.value[i][index].data
  })
}
//#endregion

</script>
<style scoped lang="scss">
.home {
  color: #fff;
  margin-top: 3vh;
  display: flex;
  width: 100%;
  font-size: 16px;



  input:focus {
    outline: none;
  }

  select:focus {
    outline: none;
  }

  .inputText {
    background-color: #06294f;
    border: 1px solid #346cae;
    color: #fff;
    height: 3vh;
    padding: 0 0.5vw;

  }

  .select_pow {
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid #addbff;
    padding: 0.3vh 0.5vw;
    color: #addbff;
    font-size: 16px;
    box-shadow: 0 0 5px #addbff;

    option {
      background-color: #f9f9f9;
      color: #333;
    }
  }

  .run {
    color: #addbff;
    padding: 0.4vh 0.5vw;
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid #addbff;
    box-shadow: 0 0 5px #addbff;
  }

  .left {
    flex: 7.2;

    .left_top {
      height: 75%;
      display: flex;

      // 计算
      .left_top_left {
        width: 38%;
        background: url('../../../assets/images/left_top/bg.png') no-repeat;
        background-size: 100% 100%;
        padding: 1.5vh 0.5vw;

        .title {
          height: 3.5vh;
          padding: 0 30px;
          display: flex;
          justify-content: space-between;
          margin-top: 0.5vh;

          .title_left {
            margin-left: 2vw;
            font-size: 18px;
            font-weight: 700;
          }
        }

        .left_top_left_com {
          height: 8vh;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;

          .left_top_left_com_left {
            line-height: 6vh;
            width: 10vw;
            font-weight: 700;
            font-size: 22px;
            color: #44baed;
            text-align: center;
            background: url(../../../assets/images/left_top/computed.png) no-repeat;
            background-size: 100% 100%;
          }

          .left_top_left_com_left_active {
            background: url(../../../assets/images/left_top/computed_active.png) no-repeat;
            background-size: 100% 100%;
            color: #fff;
          }

        }

        .inputParams {
          height: 3.5vh;
          line-height: 3vh;
          margin-left: 2vw;
        }

        .inputParams_form {
          height: 10.8vh;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-flow: wrap;
          padding: 0 1.5vw;

          .inputParams_form_item {
            width: 50%;
            & span{
              font-size: 14px;
              color: #ccc;
            }
          }
        }

        .params {
          height: 3.5vh;
          line-height: 3.5vh;
          margin-left: 2vw;
        }

        .params_form {
          height: 6vh;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 0 3vw;

          .params_form_item {
            width: 50%;
          }
        }

        // 校核参数
        .checkParams {
          height: 23.8vh;
          display: flex;
          justify-content: space-around;
          align-items: center;
          flex-direction: column;
          padding: 2vh 2vw;

          .checkParams_item {
            display: flex;
            align-items: center;
            width: 100%;

            .checkParams_select {
              height: 4vh;
              width: 70%;
              background-color: #06294f;
              color: #fff;
              border: 1px solid #346cae;
              padding: 0 1vw;

            }

            .checkParams_input {
              height: 4vh;
              width: 55%;
              // background-color: rgba(0, 0, 0, 0);
            }

            .import {
              display: flex;
              justify-content: center;
              align-items: center;
              height: 4vh;
              width: 15%;
              background-color: #0d6fab;
              border: 1px solid #346cae;

              &:hover {
                background-color: #346cae;
                cursor: pointer;
              }
            }
          }
        }

        .compose {
          height: 3.5vh;
          line-height: 3.5vh;
          margin-left: 2vw;
        }

        .compose_form {
          height: 20vh;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          flex-flow: wrap;
          margin-top: 1vh;
          padding-left: 2vw;
          .compose_form_item {
            width: 50%;
          }
        }
      }

      // 校核
      .left_top_left_check {
        background: url('../../../assets/images/left_top/bg2.png') no-repeat;
        background-size: 100% 100%;
        padding: 1.5vh 0.5vw;
      }

      // 模型
      .left_top_right {
        width: 55%;
        background: url('@/assets/images/mode.png') no-repeat center;
        // background-size: 35%;
        transform: scale(0.9) translateX(1vw);

        .mode {
          width: 100%;
          height: 100%;
          font-size: 16px;

          // 计算
          .mode_com {
            position: relative;

            .mode_com_left {
              position: absolute;
              width: 18vw;
              height: 21vh;
              background: url(../../../assets/images/mode/left.png) no-repeat center;
              background-size: 100% 100%;
              top: 30vh;
              left: -1vw;
              padding: 6.3vh 5.5vh 0 0;

              .mode_com_left_title {
                width: 97%;
                text-align: center;
                padding: 0.1vh 0 1vh 0;
              }

              .mode_com_left_form {
                height: 11vh;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                padding: 0 1vw
              }
            }

            .mode_com_right {
              position: absolute;
              width: 16vw;
              height: 15vh;
              background: url(../../../assets/images/mode/right.png) no-repeat center;
              background-size: 100% 100%;
              top: 16.5vh;
              right: -0.3vw;
              padding: 3.5vh 0 0 3.8vw;

              .mode_com_right_title {
                width: 100%;
                text-align: center;
                padding: 0 0 1vh 0;
              }

              .mode_com_left_form_item {
                padding: 2vh 0 0 0.8vw;
              }
            }
          }

          // 校核
          .mode_check {
            position: relative;

            .mode_check_left {
              position: absolute;
              width: 15vw;
              height: 18vh;
              background: url(../../../assets/images/mode/left.png) no-repeat center;
              background-size: 100% 100%;
              top: 30vh;
              left: 2vw;
              padding: 4.8vh 3vw 0 0;

              .mode_check_left_title {
                width: 97%;
                text-align: center;
                padding: 0.6vh 0 0 0.5vw;
              }

              .mode_check_left_text {
                height: 11vh;
                padding: 3vh 3vw;
              }
            }

            .mode_check_right {
              position: absolute;
              width: 18vw;
              height: 20vh;
              background: url(../../../assets/images/mode/check_top.png) no-repeat center;
              background-size: 100% 100%;
              right: -2.3vw;
              padding: 3.3vh 0 0 3.4vw;

              .mode_check_right_title {
                width: 100%;
                text-align: center;
              }

              .mode_check_right_text {
                height: 14vh;
                padding: 1.5vh 1.5vw;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
              }
            }

            .mode_check_right_top {
              top: 16.5vh;
            }

            .mode_check_right_bottom {
              top: 46.5vh;
              right: -1.9vw;
            }
          }

          .mode_output {
            position: relative;

            .mode_output_left {
              position: absolute;
              width: 15vw;
              height: 20vh;
              background: url(../../../assets/images/mode/output_left.png) no-repeat center;
              background-size: 100% 100%;
              top: 30vh;
              left: 1.9vw;
              padding: 4vh 0 0 1vw;
              display: flex;
              justify-content: space-evenly;
              flex-direction: column;
            }

            .mode_output_right_top {
              background: url(../../../assets/images/mode/output_right_top.png) no-repeat center;
              background-size: 100% 100%;
              width: 16vw;
              height: 17vh;
              position: absolute;
              top: 16.5vh;
              right: -0.4vw;
              padding: 3vh 0 0 4.5vw;
              display: flex;
              flex-direction: column;
              justify-content: space-evenly;
            }

            .mode_output_right_bottom {
              background: url(../../../assets/images/mode/output_right_bottom.png) no-repeat center;
              background-size: 100% 100%;
              width: 18vw;
              height: 33.5vh;
              position: absolute;
              top: 39vh;
              right: -1.8vw;
              padding: 4vh 0 1.5vh 5vw;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
            }
          }
        }
      }
    }

    .left_bottom {
      height: 25%;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .menu_icon {
        width: 6vw;
        margin-left: 1vw;
      }

      .menu_text {
        width: 8vw;
        height: 4vh;
        margin-top: 0.5vh;
        background: url(../../../assets/images/left_bottom/menu_text.png) no-repeat center;
        background-size: 100% 100%;
        text-align: center;
        line-height: 4vh;
        color: #60c6ff;
      }

      .menu_text_active {
        color: #00ffe4;
        background: url(../../../assets/images/left_bottom/menu_text_active.png) no-repeat center;
      }
    }
  }

  .right {
    flex: 2.8;

    // border: 1px solid blue;
    .right_top {
      display: flex;
      flex-wrap: wrap;

      .right_top_item {
        margin: 0.5vh 0.2vw;
        width: 47.83%;
        height: 6vh;
        // height: 60px;

        background: url('../../../assets/images/right_top.png') no-repeat;
        background-size: 100% 100%;
        padding: 1vh 1vw;

        .right_top_item_key {
          padding-left: 0.5vw;
          font-size: 16px;
        }

        .right_top_item_value {
          font-size: 20px;
          color: #20dbfd;
          font-weight: 700;
          text-shadow: 0 0 10px#20dbfd, 0 0 10px#20dbfd;
          text-align: right;
          padding-right: 10px;
        }
      }
    }

    .right_bg {
      width: 98%;
      background: url(../../../assets/images/right_center/bg.png) no-repeat center;
      background-size: 100% 100%;
      margin: 0 0.2vw;
      padding: 1vh 0;
    }

    .right_center {
      margin: 1.5vh 0;

      // 物性
      .PhysicalProperties {
        height: 18vh;

        .PhysicalProperties_title {
          width: 100%;
          display: flex;
          justify-content: center;
          justify-content: center;
          height: 2vh;
          background: url(../../../assets/images/right_center/text_bg.png) no-repeat center;
          color: #35b5ee;
          font-size: 16px;
          font-weight: 700;
        }

        .PhysicalProperties_form {
          height: 16vh;
          padding: 1.5vh 0.5vw;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
          align-items: center;

          .PhysicalProperties_form_item {
            font-size: 13px;
            width: 36%;

            span {
              font-size: 11px;
              color: #35b5ee;
            }
          }
        }
      }

      // 拟合参数
      .FittingParameters {
        height: 24.99vh;

        .FittingParameters_title {
          width: 100%;
          display: flex;
          justify-content: center;
          justify-content: center;
          height: 2vh;
          background: url(../../../assets/images/right_center/text_bg.png) no-repeat center;
          color: #35b5ee;
          font-size: 16px;
          font-weight: 700;
        }

        .FittingParameters_form {
          height: 20vh;
          padding: 3vh 1vw 1vh 1vw;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
          align-items: center;

          .FittingParameters_form_item {
            width: 49%;

            .FittingParameters_form_item_btn {
              padding: 0.35vw;
              margin-left: 5.4vw;
              width: 5vw;
              background-color: #0d6fab;
              border: 1;
              font-weight: 700;
              text-align: center;
              border: 1px solid #35b5ee;
            }

            .FittingParameters_form_item_btn:active {
              border: 1px solid #0d6fab;
              background-color: #07315f;
            }
          }
        }
      }
    }

    .right_bottom {
      height: 25vh;
      display: flex;

      .echarts_left {
        position: relative;
        left: 0.8vw;
        width: 15%;

        .echarts_left_top {
          height: 80%;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;

          .echarts_left_top_div {
            width: 100%;
            line-height: 1.6;
            padding-left:0.5vw;
            color: #ccc;
            background: url(../../../assets/images/echarts_left/bg.png) no-repeat center;
            background-size: 100% 100%;
          }
          .echarts_left_top_bg_active {
            color: #fff;
            background: url(../../../assets/images/echarts_left/bg_active.png) no-repeat center;
            background-size: 100% 100%;
          }
        }
        .echarts_left_bottom{
          margin-top: 1vh;
          padding: 0.5vh 1vw;
          border: 1px solid #346cae;
          background-color: #002b58;
        }
      }
      .echarts_right {
        width: 85%;
      }
    }
  }
}

:deep(.el-dialog) {
  left: -13vw;
  top: 25vh;
  width: 16vw;
  background: none;

  .el-dialog__header {
    position: relative;
    top: 2.5vh;
    width: 100%;
    z-index: 9999;
  }

  .el-dialog__body {
    padding: 0;
  }
}
</style>